<template>
  <div class="flex flex-col fixed bg-transparent left-2 animate__animated animate__fadeIn" style="z-index: 9; bottom: 3.5rem;">
    <div v-show="!modelValue" class="w-12 bg-white -mb-6 animate__animated" :class="{animate__fadeOut: fadeOut, animate__fadeIn: props.modelValue ? false : true}">
      <div >
        <div class="w-12 h-12 bg-white -mt-6" style="border-top-left-radius: 50%; border-top-right-radius: 50%;"></div>
        <div class="-mt-8">
          <div class="flex items-center flex-col py-2" @click="onClick('service')">
            <van-icon style="display: block;" name="service-o" size="1.3rem"/>
            <span class="text-xs" style="margin-top: 2px;">客服</span>
          </div>
          <div class="flex items-center flex-col py-2"  @click="onClick('wallet')">
            <van-icon style="display: block;" name="paid" size="1.3rem"/>
            <span class="text-xs" style="margin-top: 2px;">钱包</span>
          </div>
          <div class="flex items-center flex-col py-2"  @click="onClick('order')">
            <van-icon style="display: block;" name="orders-o" size="1.3rem"/>
            <span class="text-xs" style="margin-top: 2px;">订单</span>
          </div>
        </div>
        <div class="h-6"></div>
      </div>
    </div>
    <div class="p-2 bg-white w-12 h-12 text-center shadow text-gray-500 flex justify-center items-center text-xs" style="line-height: 1rem; border-radius: 50%;" @click="toggle">
      <span v-if="modelValue">
        快捷<br/>导航
      </span>
      <span v-else>
        <van-icon name="arrow-down" />
      </span>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const emits = defineEmits([
    'update:modelValue',
    'command',
])

const props = defineProps({
  modelValue: false,
})

const fadeOut = ref(false)

const collapse = () => {
  if (!props.modelValue) {
    toggle()
  }
}

const toggle = () => {
  let v = !props.modelValue
  if (v) {
    fadeOut.value = true
    setTimeout(() => {
      fadeOut.value = false
      emits('update:modelValue', v)
    }, 530);
  } else {
    emits('update:modelValue', v)
  }
}

const onClick = (cmd) => {
  emits('command', cmd)
}

defineExpose({ collapse })

</script>

<style scoped>

</style>